<template>
    <table border="1" align="center" width="400px">
        <caption>
            <h2>学生信息表</h2>
        </caption>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr align="center" v-for="(user,index) in listObj" :key="index">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    const state = reactive({
      listObj: [
        { id: 1, name: '刘兵', age: 25 },
        { id: 2, name: '汪琼', age: 18 },
        { id: 3, name: '张三', age: 22 },
        { id: 4, name: '李四', age: 20 },
        { id: 5, name: '王二', age: 19 }
      ]
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style>
    h2{
        color: red;
    }
</style>
